import React, { Component } from 'react';
import { Form, Input } from 'antd-mobile'
import { NavBar, Space, Toast, Dialog, Button } from 'antd-mobile'
import request from "../../api"
import "./login.css"
interface Props {
    history: any,
    location: any,
    match: any
}

interface State {
    massname: string,
    masspass: string,
}

class Login extends Component<Props, State> {
    constructor(porps: Props) {
        super(porps);
        this.state = {
            massname: "手机号不能为空!",
            masspass: "密码不能为空!",
        }
    }
    //跳转到注册页
    toRegister() {
        this.props.history.push({ pathname: '/register' });
    }

    //登陆事件
    denglu(v: any) {
        console.log(v);
        
        Dialog.confirm({
            content: '是否登陆',
            onConfirm: async () => {
                request.user.user_login({loginname:v.loginname,password:v.password}).then((ok) => {

                    Toast.show({
                        icon: 'success',
                        content: ok.data.message,
                        position: 'bottom',
                    })
                    console.log(ok.data);
                    
                    if (ok.data.code === "200") {
                        localStorage.setItem("token",ok.data.data.token)
                        localStorage.setItem("userid",ok.data.data.userid)
                        this.props.history.push({ pathname: '/index/home' });
                    }
                })

            }
        })

    }
    render() {
        return (
            <div className='login'>
                <NavBar>登陆</NavBar>
                <Form
                    onFinish={(values) => {
                        this.denglu(values)

                    }}
                    layout='horizontal' mode='card' footer={
                        <Button block type='submit' color='danger' size='large'>
                            登陆
                        </Button>
                    }

                >
                    <Form.Item name="loginname" label='手机号' rules={[{ required: true, message: this.state.massname }]}>
                        <Input placeholder='请输入账号/手机号' />
                    </Form.Item>
                    <Form.Item name="password" label='密码' rules={[{ required: true, message: this.state.masspass }]}>
                        <Input placeholder='请输入密码' />
                    </Form.Item>
                </Form>
                <p onClick={() => { this.toRegister() }}>手机号快捷注册</p>
            </div>
        );
    }
}

export default Login;